<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="../../ohter/js库/mock.js"></script>
    <script src="../../ohter/js库/vue.js"></script>
    <title>结构伪类选择器</title>
    <style>
        /* 
        根据文档结构1来选择元素 常用于根据父级选择器选择子元素 
            E:first-child 选择父元素的第一个元素
            E:last-child 选择父元素最后一个元素
            E:nth-child(n) 选择父元素第n个元素或者多个特定的子元素
                n可以是数字 关键字 公式
                关键字可以是even odd
                公式 n 2n-1 n+1 -n+5 (n从0自增)
            E:first-of-type 指定类型的第一个
            E:last-of-type 指定类型的最后一个
            E:nth-of-type(n) 指定类型的第n个

        */
       
        /* ul :first-child {
            color: green;
        }
        ul li:last-child {
            color: aqua;
        }
        ul :nth-child(odd) {
            color: blue;
        }
        ol :nth-child(-n+5) {
            background-color: yellow;
        } */

        ul :first-of-type {
            background-color: green;
        }
        Ul :last-of-type {
            color: saddlebrown;
        }
         /* 
            nth-child和nth-of-type区别
                child会把所有孩子都排列序号
                child执行时首先看nth-child(1) 之后回去看前面的div

                type会把指定元素div的盒子排列序号 
        */
        section div:nth-child(1) {
            color: yellow;
        }
        section :nth-of-type(1){
            color: palevioletred;
        }
    </style>
</head>

<body>
    <div id="root">
        <section>
            <p>你会大大超出我</p>
            <p>你会大大超出我</p>
            <div>熊大</div>
            <div>熊二</div>
        </section>
        <ul>
            <li>1</li>
            <li>2</li>
            <li>3</li>
            <li>4</li>
            <li>5</li>
            <li>6</li>
            <li>7</li>
            <li>8</li>
            <li>9</li>
            <li>10</li>
        </ul>
        <ol>
            <li>1</li>
            <li>2</li>
            <li>3</li>
            <li>4</li>
            <li>5</li>
            <li>6</li>
            <li>7</li>
            <li>8</li>
            <li>9</li>
            <li>10</li>
        </ol>
    </div>
</body>
<script>
    new Vue({
        el: '#root',
        data() {
            return {
            }
        },
    })
</script>

</html>